<template>
  <div class="wrapper">
    <div class="map-tools-item">
      <div class="tool-item" v-for="item in toolsList" :key="item.type" :class="{'is-active': item.active}"
        @click="handleChange(item)">
        <img class="tool-item-icon" :src="item.icon" alt="">
        <span>{{item.title}}</span>
      </div>
    </div>
    <div v-if="resultArray.length">
      <div class="link">
        <div class="link-item"></div>
        <div class="link-item"></div>
      </div>
      <div class="add-result">
        <div v-for="(item,idx) of resultArray" :key="idx">
          <div class="add-result-item">{{item}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['mapMeasure'],
  data() {
    return {
      resultArray: [],
      toolsList: [
        {
          key: 'length',
          type: 'distance',
          icon: `${this.rootUrl}img/map/tools/maptool-measure_ranging.png`,
          title: '距离',
          active: false,
        },
        {
          key: 'area',
          icon: `${this.rootUrl}img/map/tools/maptool-measure_Area.png`,
          type: 'area',
          title: '面积',
          active: false,
        },
        {
          key: 'clear',
          icon: `${this.rootUrl}img/map/tools/maptool-measure_delete.png`,
          title: '清除',
          active: false,
        },
      ],
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.init()
  },
  destroyed() {
    this.clearDraw()
  },
  methods: {
    init() {
    },


    /** @description: 绘制图形 */
    handleChange(item) {
      this.clearDraw();
      if (item.key === 'clear') {
        this.setDefault();
        return;
      }
      this.toolsList.forEach(element => {
        if (element.key === item.key) {
          element.active = !element.active;

          if (element.active) {
            this.startDraw(item.type);
          }
        } else {
          element.active = false;
        }
      });
    },

    startDraw(type) {
      this.mapMeasure.activate(type, (result) => {
        const outputStr = this.formateDrawResult(type, result);
        if (outputStr) {
          this.resultArray = outputStr.split('/');
        }
      });
    },

    clearDraw() {
      this.mapMeasure.deactivate();
      this.resultArray = []
    },

    setDefault() {
      this.toolsList.forEach(element => {
        element.active = false;
      });
      this.resultArray = []
    },

    /** @description:   */
    formateDrawResult(type, result) {
      if (result) {
        let formateResult = '';
        if (type === 'distance') {
          formateResult = result;
        } else {
          formateResult = this.getArea(result);
        }
        return formateResult;
      } else {
        return ''
      }
    },

    /**  @description:    */
    getArea(area) {
      const areaNum = area.split('平')[0];
      let mu = '';  // 亩
      let hectare = '';  // 公顷
      let outputString = '';
      if (area.includes('平方米')) {
        mu = ((areaNum) * 15 / 10000).toFixed(2) + '亩';
        hectare = ((areaNum) / 100).toFixed(2) + '公顷';
        outputString = hectare + '/' + mu + '/' + area;
      } else if (area.includes('平方公里')) {
        mu = ((areaNum) * 1500).toFixed(2) + '亩';
        hectare = ((areaNum) * 100).toFixed(2) + '公顷';
        outputString = area + '/' + hectare + '/' + mu;
      }
      return outputString;
    },

  }
};
</script>
<style lang="scss" scoped>
.map-tools-item {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 5px 10px;
  .tool-item {
    width: 88px;
    padding: 5px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border: 1px solid #fff;
    cursor: pointer;
    img {
      width: 25px;
      height: 25px;
    }
    &.is-active,
    &:hover {
      color: #39f;
    }
  }
  .tool-item + .tool-item {
    border-left: 1px solid rgb(202, 202, 202);
  }
}
.link {
  height: 16px;
  margin: -4px 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &-item {
    width: 4px;
    border-radius: 2px;
    height: 100%;
    background: #bfbfbf;
  }
}

.add-result {
  border-radius: 4px;
  background: #fff;
  padding: 12px 20px;
  box-shadow: 0px 2px 4px 0px rgba(19, 53, 117, 0.3);

  &-item {
    padding: 3px 0;
  }
}
</style>